<template>
  <s-layout
    title="我的"
    tabbar="/pages/index/newUser"
    navbar="custom"
    onShareAppMessage
    :showFloatButton="true"
  >
    <!-- 原有模板内容 -->
    <s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
      <s-block-item :type="item.type" :data="item.data" :styles="item.style" />
    </s-block>


    <!-- 功能菜单区域（新增我的地址） -->
    <view class="menu-container">
      <!-- 我的订单 -->
      <view class="menu-item" @click="handleOrderClick">
        <view class="menu-icon">
          <image src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/order.png" mode="widthFix"></image>
        </view>
        <view class="menu-text">我的订单</view>
        <view class="menu-arrow">
          <image src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/arrow-right.png" mode="widthFix"></image>
        </view>
      </view>

      <!-- 新增：我的地址 -->
      <view class="menu-item" @click="handleAddressClick">
        <view class="menu-icon">
          <image src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/address.png" mode="widthFix"></image>
        </view>
        <view class="menu-text">我的地址</view>
        <view class="menu-arrow">
          <image src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/arrow-right.png" mode="widthFix"></image>
        </view>
      </view>

      <!-- 服务电话 -->
      <view class="menu-item" @click="handlePhoneClick">
        <view class="menu-icon">
          <image src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/phone.png" mode="widthFix"></image>
        </view>
        <view class="menu-text">服务电话</view>
        <view class="menu-arrow">
          <image src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/arrow-right.png" mode="widthFix"></image>
        </view>
      </view>

      <!-- 设置 -->
      <view class="menu-item" @click="handleSettingClick">
        <view class="menu-icon">
          <image src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/setting.png" mode="widthFix"></image>
        </view>
        <view class="menu-text">设置</view>
        <view class="menu-arrow">
          <image src="https://zero-one01.oss-cn-shenzhen.aliyuncs.com/icon/arrow-right.png" mode="widthFix"></image>
        </view>
      </view>
    </view>

  </s-layout>
</template>

<script setup>
import { computed } from 'vue';
import { onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
import sheep from '@/sheep';

// 隐藏原生tabBar
uni.hideTabBar();

const template = computed(() => sheep.$store('app').template.newUser);
const isLogin = computed(() => sheep.$store('user').isLogin);

// 页面显示时更新用户数据
onShow(() => {
  sheep.$store('user').updateUserData();
});

// 下拉刷新
onPullDownRefresh(() => {
  sheep.$store('user').updateUserData();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 800);
});

onPageScroll(() => {});

// 菜单点击事件
const handleOrderClick = () => {
  // 跳转到订单列表页
  uni.navigateTo({
    url: '/pages/order/list'
  });
};

// 新增：我的地址点击事件
const handleAddressClick = () => {
  // 跳转到地址管理页
  uni.navigateTo({
    url: '/pages/user/address/list' // 假设地址列表页路径为这个
  });
};

const handlePhoneClick = () => {
  // 拨打电话功能
  uni.makePhoneCall({
    phoneNumber: '400-123-4567' // 替换为实际服务电话
  });
};

const handleSettingClick = () => {
  // 跳转到设置页
  uni.navigateTo({
    url: '/pages/user/setting'
  });
};
</script>

<style>
/* 页面容器样式 */
page {
  background-color: #f5f5f5;
  padding-bottom: 120rpx; /* 为底部元素预留空间 */
}

/* 用户信息区域 */
.user-info-section {
  background-color: #fff;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
}

.avatar-container {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  border: 2rpx solid #eee;
}

.user-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 菜单容器 */
.menu-container {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin: 0 20rpx 30rpx; /* 底部增加间距 */
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 菜单项样式 */
.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #f1f1f1;
  transition: background-color 0.2s;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background-color: #f5f5f5;
}

/* 菜单图标 */
.menu-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-icon image {
  width: 40rpx;
  height: 40rpx;
}

/* 菜单文字 */
.menu-text {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

/* 箭头图标 */
.menu-arrow {
  width: 30rpx;
  height: 30rpx;
  opacity: 0.5;
}

.menu-arrow image {
  width: 20rpx;
  height: 20rpx;
}

/* 退出登录按钮容器 */
.logout-container {
  position: fixed;
  bottom: 30rpx;
  left: 0;
  right: 0;
  padding: 0 20rpx;
  z-index: 10;
}
.u-tabbar{
  background:#fef5f5
}

/* 退出登录按钮样式（单独按钮） */
.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center; /* 文字图标居中 */
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  margin: 0 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  border: 1rpx solid #ffecec;
}

.logout-btn:active {
  background-color: #fef5f5;
  transform: scale(0.99);
}

.logout-btn .menu-text {
  color: #ff4d4f;
  font-weight: 500;
}

.logout-btn .menu-icon image {
  filter: hue-rotate(130deg) brightness(0.8); /* 红色调图标 */
}
</style>